<template>
    <div id="addAdmin">
        <!-- <el-form ref="form">
            <el-form-item label="账号">
                <el-input
                    v-model="username"
                    placeholder="请输入账号"
                    :rules="[{ required: true, message: '账号不能为空' }]"
                ></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input
                    v-model="password"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '密码不能为空' }]"
                ></el-input>
            </el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form> -->
        <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item
                label="账号"
                prop="username"
                :rules="[{ required: true, message: '账号不能为空' }]"
            >
                <el-input
                    v-model="numberValidateForm.username"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item
                label="密码"
                prop="password"
                :rules="[{ required: true, message: '密码不能为空' }]"
            >
                <el-input
                    v-model="numberValidateForm.password"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="submitForm('numberValidateForm')"
                    >提交</el-button
                >
                <el-button @click="resetForm('numberValidateForm')"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("admin");
export default {
    data() {
        return {
            numberValidateForm: {
                username: "",
                password: "",
            },
        };
    },
    methods: {
        ...mapActions(["getAdminsByUsername", "addAdmins"]),
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const result = await this.getAdminsByUsername({
                        username: this.numberValidateForm.username,
                    });
                    if (result.data.code) {
                        this.$message("该账号已存在，请重新输入");
                    } else {
                        const res = await this.addAdmins({
                            username: this.numberValidateForm.username,
                            password: this.numberValidateForm.password,
                        });
                        if (res.code) {
                            this.$message("添加成功");
                        } else {
                            this.$message("添加失败");
                        }
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style lang='scss'>
#addAdmin {
    line-height: 1;
    .el-form {
        width: 300px;
        margin: 0 auto;
    }
    .el-input {
        width: 250px;
    }
}
</style>